<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polylines" :scale="14">
				</map>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue'

// 地图中心点
const latitude = ref(39.909)
const longitude = ref(116.39742)

// 标记点数据
const markers = ref([
	{
		id: 1,
		latitude: 39.909,
		longitude: 116.39742,
		iconPath: '/static/location.png',
		width: 30,
		height: 30,
		callout: {
			content: '起点',
			color: '#000000',
			fontSize: 14,
			borderRadius: 3,
			bgColor: '#ffffff',
			padding: 5,
			display: 'ALWAYS'
		}
	},
	{
		id: 2,
		latitude: 39.90,
		longitude: 116.39,
		iconPath: '/static/location.png',
		width: 30,
		height: 30,
		callout: {
			content: '终点',
			color: '#000000',
			fontSize: 14,
			borderRadius: 3,
			bgColor: '#ffffff',
			padding: 5,
			display: 'ALWAYS'
		}
	}
])

// 连线数据
const polylines = ref([
	{
		points: [
			{
				latitude: 39.909,
				longitude: 116.39742
			},
			{
				latitude: 39.90,
				longitude: 116.39
			}
		],
		color: '#3678BF',
		width: 4,
		dottedLine: false, // 是否虚线
		arrowLine: true, // 是否带箭头
		borderColor: '#000000', // 线的边框颜色
		borderWidth: 1 // 线的厚度
	}
])
</script>

<style scoped>
.page-section-gap {
	box-sizing: border-box;
	padding: 0;
}
</style>
